<template>
    <div class="loginIndex">
        <div class="navHead">
            <div class="left">
                <a href="javascript:;" @click="back">
                    <i class="el-icon-back"></i>
                    <span>返回</span>
                </a>

                <a href="javascript:;" class="on">
                    <i class="iconfont icon-huiyuan2"></i>
                    <span>登录设置</span>
                </a>
            </div>
            <div class="right">

                <a href="javascript:;" class="release" @click="saveBottomMenu">
                    <span>保存设置</span>
                </a>
            </div>
        </div>
        <div class="body" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
            <div class="main">
                <div class="head">
                    <img :src="head_black" alt="" />
                    <img :src="head_black_r" alt="" class="head_black_r" />
                    <p class="title">登录</p>
                </div>
                <div class="section">
                    <!--v-if="isReWrite"-->
                    <IndexMainComponent :controlData="control" :isReWrite="isReWrite" ref="IndexMainComponent" v-if="nowType=='add'||(nowType=='edit'&&isReWrite)"></IndexMainComponent>
                </div>
            </div>
            <div class="right">
                <div class="head">
                    <i :class="control.icon"></i>
                    <span>{{ control.title }}</span>
                </div>
                <div class="article">
                    <!--v-if="isReWrite"-->
                    <IndexRightComponent ref="IndexRightComponent" :isReWrite="isReWrite" v-if="nowType=='add'||(nowType=='edit'&&isReWrite)" :controlData="control"></IndexRightComponent>
                </div>
            </div>
        </div>
        <ChooseImageComponentWrapper></ChooseImageComponentWrapper>
        <ChooseLinkComponent></ChooseLinkComponent>
    </div>
</template>
<script>
import head1Icon from "../../../static/images/login_style1.jpeg";
import head2Icon from "../../../static/images/login_style2.jpg";
import logo2x from "@/static/images/logo2x.png";
import menuSkeleton from "@/static/images/menu-skeleton.png";
import head_black from "@/static/images/head_black.png";
import head_black_r from "@/static/images/head_black_r.png";
import menu_img from "@/static/images/menu_img.png";
import menu_img_active from "@/static/images/menu_img_active.png";
import ChooseImageComponentWrapper from "@/pages/components/vlonChooseImage/Index.vue";
import ChooseLinkComponent from "@/pages/components/vlonChooseLink/Index.vue";
import headApi from '@/utils/hade';
import { getToken } from "@/utils/auth";
export default {
    name: "loginIndex",
    data() {
        return {
            pageName: "设置自定义表单页",
            menuSkeleton,
            head1Icon,
            head2Icon,
            logo2x,
            head_black,
            head_black_r,
            menu_img,
            menu_img_active,
            control: {
                id: "loginId1",
                name: "setLogin",
                title: "登录设置",
                ename: "setLoginComponent",
                icon: "iconfont icon-renzhengyonghu",
                main: {
                    // moduleName: "登录默认模板", //模板名称
                    loginStyle: 1, //登录样式，
                    loginHeadImg: head1Icon, //登录页头图设置
                    showStyle1Head: true, //是否显示样式1的头部，true显示，false隐藏
                    setStyle1HeadType: 1, //设置头部方式，1手动设置，2从系统读取
                    style1HeadLogo: logo2x, //样式1，头部的logo
                    style1HeadTitle: "润客管理系统", //样式1，头部的标题
                    style1DisplayRegister: true, //样式1，是否显示注册按钮
                    loginPageBgColor: "#8EB3F0", //登录页背景颜色
                    loginLinkFontColor: "#0079FE", //登录页链接文字颜色
                    loginButtonFontColor: "#FFFFFF", //登录页按钮文字颜色
                    loginButtonBgColor: "#5665c2", //登录页按钮背景颜色
                    borderRadiusTop: 30, //上边角
                    borderRadiusBottom: 30, //下边角
                },
                right: [
                    {
                        id: 1,
                        name: "组件样式",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "1-0",
                                name: "",
                                title: "模板名称：",
                                display: "none",
                                ename: "moduleName",
                                type: "text",
                                value: "登录默认模板",
                                default: "登录默认模板",
                                controlName: "inputComponent",
                                maxlength: 20,
                                placeholder: "为空则不显示",
                                suffix: "",
                                showWordLimit: true,
                            },
                            {
                                id: "1-1",
                                name: "",
                                title: "登录样式：",
                                display: "block",
                                ename: "loginStyle",
                                value: 1,
                                default: 1,
                                controlName: "radioComponent",
                                options: [
                                    {
                                        id: 1,
                                        name: "样式1",
                                        value: 1,
                                    },
                                    {
                                        id: 2,
                                        name: "样式2",
                                        value: 2,
                                    },
                                ],
                            },
                            {
                                id: "1-2",
                                name: "",
                                title: "上传头图：",
                                display: "block",
                                ename: "loginHeadImg",
                                value: head1Icon,
                                default: head1Icon,
                                controlName: "chooseImageComponent",
                            },
                            {
                                id: "1-3",
                                name: "",
                                title: "显示头部：",
                                display: "block",
                                ename: "showStyle1Head",
                                value: true,
                                default: true,
                                controlName: "radioComponent",
                                options: [
                                    {
                                        id: true,
                                        name: "显示",
                                        value: true,
                                    },
                                    {
                                        id: false,
                                        name: "隐藏",
                                        value: false,
                                    },
                                ],
                            },
                            {
                                id: "1-4",
                                name: "",
                                title: "头部设置方式：",
                                display: "block",
                                ename: "setStyle1HeadType",
                                value: 1,
                                default: 1,
                                controlName: "radioComponent",
                                options: [
                                    {
                                        id: 1,
                                        name: "手动设置",
                                        value: 1,
                                    },
                                    {
                                        id: 2,
                                        name: "从系统读取",
                                        value: 2,
                                    },
                                ],
                            },
                            {
                                id: "1-5",
                                name: "",
                                title: "头部Logo：",
                                display: "block",
                                ename: "style1HeadLogo",
                                value: logo2x,
                                default: logo2x,
                                controlName: "chooseImageComponent",
                            },
                            {
                                id: "1-6",
                                name: "",
                                title: "头部文字：",
                                display: "block",
                                ename: "style1HeadTitle",
                                type: "text",
                                value: "润客管理系统",
                                default: "润客管理系统",
                                controlName: "inputComponent",
                                maxlength: 20,
                                placeholder: "为空则不显示",
                                suffix: "",
                                showWordLimit: true,
                            },
                            {
                                id: "1-7",
                                name: "",
                                title: "显示注册：",
                                display: "block",
                                ename: "style1DisplayRegister",
                                value: true,
                                default: true,
                                controlName: "radioComponent",
                                options: [
                                    {
                                        id: true,
                                        name: "显示",
                                        value: true,
                                    },
                                    {
                                        id: false,
                                        name: "隐藏",
                                        value: false,
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        id: 2,
                        name: "登录页样式",
                        direction: "column",
                        open: true,
                        catalog: [
                            {
                                id: "2-1",
                                name: "",
                                ename: "loginPageBgColor",
                                title: "页面背景颜色：",
                                display: "block",
                                controlName: "colorComponent",
                                default: "#8EB3F0",
                                value: "#8EB3F0",
                            },
                            {
                                id: "2-2",
                                name: "",
                                ename: "loginLinkFontColor",
                                title: "链接文字颜色：",
                                display: "block",
                                controlName: "colorComponent",
                                default: "#0079FE",
                                value: "#0079FE",
                            },
                            {
                                id: "2-3",
                                name: "",
                                ename: "loginButtonFontColor",
                                title: "按钮文字颜色：",
                                display: "block",
                                controlName: "colorComponent",
                                default: "#FFFFFF",
                                value: "#FFFFFF",
                            },
                            {
                                id: "2-4",
                                name: "",
                                ename: "loginButtonBgColor",
                                title: "按钮背景颜色：",
                                display: "block",
                                controlName: "colorComponent",
                                default: "#5665c2",
                                value: "#5665c2",
                            },
                            {
                                id: "2-5",
                                title: "上边角：",
                                display: "none",
                                name: "",
                                ename: "borderRadiusTop",
                                min: 0,
                                max: 100,
                                step: 1,
                                controlName: "sliderComponent",
                                default: 30,
                                value: 30,
                                suffix: "px",
                            },
                            {
                                id: "2-6",
                                title: "下边角：",
                                display: "none",
                                name: "",
                                ename: "borderRadiusBottom",
                                min: 0,
                                max: 100,
                                step: 1,
                                controlName: "sliderComponent",
                                default: 30,
                                value: 30,
                                suffix: "px",
                            },
                        ],
                    },
                ],
            },
            nowType: "add",
            pageId: 7, //此ID不可删除
            // pageId: null,
            pageName: "登录设置",
            pageKey: "setLoginStyle",
            // pageKey: null,
            pageContent: null,
            pageType: 3, //0 自定义页面 1 个性化页面 2 固定页面 3 登录页面  4 自定义表单  5  底部导航按钮 6 固定主题色 7 登录主题
            tenantId: 299, //租户ID
            loading: false,
            isReWrite: false,
        };
    },
    created() {},
    props: [],
    components: {
        ChooseImageComponentWrapper,
        ChooseLinkComponent,
        IndexMainComponent: () => import("./IndexMainComponent.vue"),
        IndexRightComponent: () => import("./IndexRightComponent.vue"),
    },
    mounted() {
        this.tenantId = localStorage.getItem("tenantId");
        this.$nextTick(() => {
            // if(localStorage.getItem("decorateLoginModuleId")) {
            //编辑
            this.nowType = "edit";
            // this.pageId = localStorage.getItem("decorateLoginModuleId");
            this.getComponentInfo();
            // }
            //  else {
            //   //新增
            //   this.nowType = "add";
            //   this.pageContent = null;
            //   this.pageId = null;
            //   this.pageKey = new Date().getTime();
            //   this.isReWrite = false;
            // }
        });
    },
    methods: {
        //查询组件详情信息
        getComponentInfo() {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .get(`${headApi}/appPageContent/${this.pageId}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        //console.log(res);
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                if (data) {
                                    this.setControlInfo(data.pageContent);
                                }
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //编辑时，查到了组件信息，这里将其回写到各组件内部
        setControlInfo(d) {
            let newControl = JSON.parse(d);
            let oldControl = this.control;
            if (newControl.right[0].catalog.length == 8) {
                newControl.right[0].catalog[8] = oldControl.right[0].catalog[8];
            }
            this.control = null;
            this.control = newControl;
            this.isReWrite = true;
        },
        //保存设置
        saveBottomMenu() {
            //拿到原始配置完毕的数据
            let control = this.$refs.IndexRightComponent.control;
            let d = control.main;

            //逐一做合法性校验，通过后执行保存，否则提示相应需要调整的内容提示

            //判断 头图图片 不为空
            if (d.loginHeadImg == "") {
                this.$message.warning("请先上传头图图片");
                return false;
            }

            //登录样式, 样式1
            if (d.loginStyle == 1) {
                //在样式1中可以设置是否显示登录模块头部

                //若显示登录模块头部, 则需要判断头部设置方式
                if (d.showStyle1Head) {
                    //若设置头部方式是手动设置
                    if (d.setStyle1HeadType == 1) {
                        //则需要判断是否上传了头部图片
                        if (d.style1HeadLogo == "") {
                            this.$message.warning("请先上传登录模块头部图片");
                            return false;
                        }
                        //再判断头部文字不为空
                        if (d.style1HeadTitle == "") {
                            this.$message.warning("请输入登录模块头部文字");
                            return false;
                        }
                    }
                }
            }

            //判断登录页背景颜色不为空
            if (d.loginPageBgColor == "") {
                this.$message.warning("请选择页面背景颜色");
                return false;
            }

            //判断登录页链接文字颜色不为空
            if (d.loginLinkFontColor == "") {
                this.$message.warning("请选择页面链接文字颜色");
                return false;
            }

            //判断登录页按钮文字颜色不为空
            if (d.loginButtonFontColor == "") {
                this.$message.warning("请选择页面按钮文字颜色");
                return false;
            }

            //判断登录页按钮背景颜色不为空
            if (d.loginButtonBgColor == "") {
                this.$message.warning("请选择页面按钮背景颜色");
                return false;
            }

            this.pageContent = JSON.stringify(control);
            //数据校验完毕，可以保存
            this.saveHandle();
        },
        saveHandle() {
            let params = new Object();
            params.pageKey = this.pageKey;
            params.pageContent = this.pageContent;
            params.pageName = JSON.parse(this.pageContent).main.moduleName;
            params.pageType = this.pageType;
            params.tenantId = this.tenantId; //租户ID
            if (this.pageId) {
                params.id = this.pageId;
                this.saveEdit(params);
            } else {
                this.saveNewAdd(params);
            }
        },
        //保存新增
        saveNewAdd(params) {
            this.loading = true;
            if (getToken()) {
                this.axios
                    .post(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("保存成功");
                                // setTimeout(()=>{
                                //   localStorage.setItem("decorateSetActiveName", "login");
                                //   this.$router.push({name: "decorateSet"});
                                // },500)
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //保存编辑
        saveEdit(params) {
            this.loading = true;
            if (getToken()) {
                this.axios
                    .put(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("保存成功");
                                // setTimeout(()=>{
                                //   localStorage.setItem("decorateSetActiveName", "login");
                                //   this.$router.push({name: "decorateSet"});
                                // },1200)
                                //去到登录模板列表页
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },

        back() {
            this.$router.go(-1);
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.loginIndex {
    background-color: #f4f6f8;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .navHead {
        width: 100%;
        height: 60px;
        background-color: #333;
        justify-content: space-between;
        display: flex;
        align-items: center;

        .left,
        .right {
            display: flex;
            height: 100%;
            align-items: center;
        }

        a {
            height: 100%;
            display: flex;
            padding: 0 15px;
            font-size: 14px;
            color: #fff;
            align-items: center;

            &:hover,
            &.on {
                background-color: #000;
            }

            i {
                margin-right: 2px;
            }

            &.release {
                min-width: 80px;
                height: 32px;
                background-color: #5d60f6;
                border-radius: 2px;
                display: flex;
                align-items: center;
                margin-right: 10px;
            }
        }
    }

    .body {
        width: 100%;
        min-width: 1400px;
        height: calc(100% - 60px);
        position: relative;

        .main {
            background-color: #fff;
            width: 375px;
            margin: 0 auto;
            height: 667px;
            display: flex;
            flex-direction: column;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            margin: 40px auto 20px;
            border-radius: 2px;
            -webkit-box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
            box-shadow: 0px 4px 14px rgba(133, 148, 162, 0.2);
            position: relative;
            z-index: 1;

            .head {
                width: 100%;
                height: 64px;
                position: relative;

                .head_black_r {
                    position: absolute;
                    right: 7px;
                    width: 87px;
                    height: 32px;
                    bottom: 6px;
                }

                .title {
                    position: absolute;
                    z-index: 100;
                    font-family: "PingFang SC";
                    font-style: normal;
                    font-weight: 600;
                    font-size: 18px;
                    line-height: 25px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    text-align: center;
                    color: #212121;
                    left: 50%;
                    -webkit-transform: translate(-50%, 0);
                    transform: translate(-50%, 0);
                    bottom: 10px;
                }
            }

            .section {
                width: 100%;
                height: 667px;
                overflow: hidden;
                position: relative;

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 2;
                    background-color: rgba(0, 0, 0, 0.5);
                }
            }

            .foot {
                width: 100%;
                height: 50px;
            }
        }

        .right {
            width: 500px;
            position: absolute;
            right: 0;
            background-color: #fff;
            top: 0;
            z-index: 2;
            height: 100%;
            .head {
                height: 50px;
                width: 100%;
                border-bottom: 1px solid #e8eaec;
                box-sizing: border-box;
                padding-left: 15px;
                display: flex;
                align-items: center;
                i {
                    opacity: 0.8;
                    font-size: 18px;
                    margin-right: 5px;
                    color: #5d60f6;
                }
                span {
                    font-size: 16px;
                }
            }
            .article {
                height: calc(100% - 50px);
                overflow-y: auto;
                padding-right: 10px;
                box-sizing: border-box;
            }
        }
    }
}
</style>
